<template>
    <div class="page-container h-100">
        <div class="h-100 container">
            <div class="globalDiv h-100 leftNav">
                <ul class="menuList">
                    <li :class="{active:activeFlag=='dkjl'}" @click="toLink('dkjl')">
                        <i class="iconfont-KUI icon-Clock"></i>
                        <!--打卡记录-->
                        <span class="title">{{this.i18n.t('Clock In List')}}</span>
                    </li>
                    <li :class="{active:activeFlag=='xfjl'}" @click="toLink('xfjl')">
                        <i class="iconfont-KUI icon-off-shelf"></i>
                        <!--下发记录-->
                        <span class="title">{{this.i18n.t('Distribution Record')}}</span>
                    </li>
                    <li :class="{active:activeFlag=='txjl'}" @click="toLink('txjl')">
                        <i class="iconfont-KUI icon-xinxiribao"></i>
                        <!--通行记录-->
                        <span class="title">{{this.i18n.t('Traffic records')}}</span>
                    </li>
                  <li :class="{active:activeFlag=='czjl'}" @click="toLink('czjl')">
                    <i class="iconfont-KUI icon-caozuojilu"></i>
                    <!--操作记录-->
                    <span class="title">操作记录</span>
                  </li>
                    <li :class="{active:activeFlag=='sjkb'}" @click="toLink('sjkb')">
                        <i class="iconfont-KUI icon-screen"></i>
                        <!--数据看板-->
                        <span class="title">{{this.i18n.t('Data board')}}</span>
                    </li>
                  <li :class="{active:activeFlag=='rzgl'}" @click="toLink('rzgl')">
                    <i class="iconfont-KUI icon-book-s"></i>
                    <!--日志-->
                    <span class="title">{{this.i18n.t('Log')}}</span>
                  </li>
                    <li :class="{active:activeFlag=='kqtj'}" @click="toLink('kqtj')">
                        <i class="iconfont-KUI icon-Sixteen-grid-s"></i>
                        <!--考勤统计-->
                        <span class="title">考勤统计</span>
                    </li>
                </ul>
            </div>
            <div class="rightTable">
                <dkjl v-if="activeFlag=='dkjl'"></dkjl>
                <xfjl v-if="activeFlag=='xfjl'"></xfjl>
                <txjl v-if="activeFlag=='txjl'"></txjl>
                <sjkb v-if="activeFlag=='sjkb'"></sjkb>
                <kqtj v-if="activeFlag=='kqtj'"></kqtj>
                <rzgl v-if="activeFlag=='rzgl'"></rzgl>
                <czjl v-if="activeFlag=='czjl'"></czjl>
            </div>
        </div>
    </div>
</template>

<script>
    //  打卡记录
    import dkjl from './dkjl';
    import xfjl from './xfjl';
    import txjl from './txjl';
    import sjkb from './sjkb';
    import kqtj from './kqtj';
    import rzgl from '../rzgl/index.vue';
    import czjl from './czjl';
    export default {
        name: "index",
        components: {
            dkjl,
            xfjl,
            txjl,
            sjkb,
            kqtj,
          rzgl,
          czjl,
        },
        watch: {

        },
        data(){
            return{
                activeFlag:"dkjl"
            }
        },
        methods:{
            toLink(url){
               this.activeFlag=url
                // this.$router.replace(url)
            }
        },
        mounted(){

        }
    }
</script>

<style lang='less' scoped>
    .globalDiv{
        border-radius: 4px;
        overflow: hidden;
    }
    .menuList li{
        height: 45px;
        padding-left: 15px;
        box-sizing: border-box;
        &.active,&:hover{
            cursor: pointer;
            color: #fff;
            background: linear-gradient(270deg, rgba(33, 153, 190, 1) 0%, rgba(6, 98, 209, 1) 100%);
        }
        .title{
            line-height: 45px;
            margin-left: 15px;
        }
    }
    .container{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border: 0px solid green;
        .leftNav{
            width: 250px;
            display: inline-block;
            border: 0px solid red;
        }
        .rightTable{
            display: inline-block;
            border: 0px solid red;
            width: calc(100% - 270px)
        }
    }
</style>
